<template>
    <div>
        <div class="warn-tool">
            <div class="fl">
                <el-button style="margin-right:-10px" size="mini" icon="el-icon-check" id="aduitPass">审核通过</el-button>
                <el-button style="margin-right:-10px" size="mini" icon="el-icon-close" id="aduitNotPass">审核不通过</el-button>
                <el-button style="margin-right:-10px" size="mini" icon="el-icon-circle-plus-outline" id="addClick">新增</el-button>
                <el-button style="margin-right:-10px" size="mini" icon="el-icon-edit" id="editorClick">修改</el-button>
                <el-button style="margin-right:-10px" size="mini" icon="el-icon-remove-outline" id="deleteClick">删除</el-button>
                <el-button style="margin-right:-10px" size="mini" icon="el-icon-check" id="comAble">启用评论</el-button>
                <el-button style="margin-right:-10px" size="mini" icon="el-icon-close" id="comUnAble">禁用评论</el-button>
                <el-button style="margin-right:-10px" size="mini" icon="el-icon-refresh">刷新</el-button>
            </div>
            <div class="fr">
                <el-input  size="mini" v-model="quickSearchInp" style="width:150px; margin-right:-5px;" ></el-input>
                <el-button size="mini" icon="el-icon-search" id="quickSearchBtn"></el-button>
                <el-button size="mini" id="heightSearchBtn">高级查询</el-button>
            </div>
            <div class="cb"></div>
            <div class="search-box" id="searchBox">							
              <div class="box-left fl" >
                  <el-form :inline="true" >
                    <el-form-item label="文章标题">
                        <el-input size="mini" v-model="searchForm.searchTle"></el-input>
                    </el-form-item>
                    <el-form-item label="作者昵称">
                        <el-input size="mini" v-model="searchForm.searchName"></el-input>
                    </el-form-item>
                    <el-form-item label="是否审核" >
                        <el-select placeholder="请选择" size="mini" style="width:150px" v-model="searchForm.searchAudit">
                            <el-option label="审核通过" value="1"></el-option>
                            <el-option label="审核不通过" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="开始时间">
                        <el-date-picker 
                        size="mini" 
                        style="width:170px" 
                        v-model="searchForm.searchStartTime"
                        value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <el-date-picker 
                        size="mini" 
                        style="width:170px" 
                        v-model="searchForm.searchEndTime"
                        value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-form>
              </div>
              <div class="box-right">
                <el-button size="mini" icon="el-icon-search" id="hightSearchBtn">查询</el-button>
                <el-button size="mini" icon="el-icon-refresh" id="resetSearchBtn">重置</el-button>
              </div>
              <div class="cb"></div>
            </div>
        </div>
        <div class="warn-table-body">
          <el-table
          ref="multipleTable"
          style="width: 100%"
          v-loading="loading"
          :data="warnData"
          tooltip-effect="dark"
          @selection-change="warnSelectChange"
          :border="true"
          >
              <el-table-column
              type="selection"
              width="55">
              </el-table-column>
              <el-table-column
                  prop="title"
                  label="标题"
                  width="360"
                  show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                  prop="titleImg"
                  label="缩略图"
                  width="150"
              >
                  <template slot-scope="scope">
                      <img  :src="api+scope.row.titleImg" alt="" style="width: 60px;height: 30px">                    
                  </template>
              </el-table-column>
              <el-table-column
                  prop="author"
                  label="作者"
                  width="200"
              >
              </el-table-column>
              <el-table-column
                  prop="from"
                  label="所属地区"
                  width="180"
                  :formatter="formatterFrom"
                  show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                  prop="type"
                  label="类型"
                  width="100"
                  :formatter="formatterType"
              >
              </el-table-column>
              <el-table-column
                  prop="audit"
                  label="审核"
                  width="100"
                  :formatter="formatterInp"
              >
              </el-table-column>
              <el-table-column
                  prop="status"
                  label="状态"
                  width="100"
                  :formatter="formatterInp"
              >
              </el-table-column>
              <el-table-column
                  prop="comable"
                  label="评论"
                  width="150"
                  :formatter="formatterInp"
              >
              </el-table-column>
              <el-table-column
                  prop="creatTime"
                  label="创建时间"
                  width="150"
              >
              </el-table-column>        
          </el-table>
          <div class="pagination">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="pagesize"
                  :current-page="currentPage"
                  layout="total, sizes, prev, pager, next"
                  :total="total">
              </el-pagination>
          </div>
        </div>

        <el-dialog 
        :visible.sync="dialogVisible" 
        top="7vh"
        :title="dialogTitle"
        >
          <div >
             <el-form 
             style="width:450px" 
             size="mini" 
             label-position="right" 
             label-width="80px" 
             :model="ruleForm"
             :rules="rules"
             ref= "ruleForm"
             > 
              <el-form-item label="标题" prop="title">
                <el-input  v-model="ruleForm.title"></el-input>
              </el-form-item>
              <el-form-item label="地区">
                <el-col :span="7">
                  <el-form-item prop="province">
                      <el-select  clearable placeholder="请选择" v-model="ruleForm.province" >
                        <el-option v-for="item in provinces" :key="item.id" :label="item.name" :value="item.id"></el-option>
                      </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="1" style="text-align:enter" >-</el-col>
                <el-col :span="7">
                  <el-form-item prop="city">
                      <el-select  clearable placeholder="请选择" v-model="ruleForm.city" >
                        <el-option v-for="item in cities" :key="item.id" :label="item.name" :value="item.id"></el-option>
                      </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="1" style="text-align:enter">-</el-col>
                <el-col :span="7">
                  <el-form-item prop="area">
                      <el-select  clearable placeholder="请选择" v-model="ruleForm.area">
                        <el-option v-for="item in areas" :key="item.id" :label="item.name" :value="item.id"></el-option>
                      </el-select>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item label="作者" prop="author">
                <el-input  style="width:120px" v-model="ruleForm.author"></el-input>
              </el-form-item>
              <el-form-item label="类型" prop="type">
                <el-select  clearable placeholder="请选择" style="width:120px" v-model="ruleForm.type">
                  <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="状态" prop="status" >
                <el-select  clearable placeholder="请选择" style="width:120px" v-model="ruleForm.status">
                  <el-option v-for="item in statues" :key="item.id" :label="item.name" :value="item.id" ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
            <div id="editor-box">
                <quill-editor ref="TextEditor" v-model="content"></quill-editor>
            </div>
            <span slot="footer" class="dialog-footer" >
              <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
              <el-button size="mini" @click="submitForm('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import $ from "jquery";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
export default {
  data() {
    return {
      api: "/api",
      quickSearchInp: "",
      loading: false,
      warnData: [],
      currentPage: 1,
      pagesize: 10,
      warnSelectData: [],
      dialogVisible: false,
      ruleForm: {
        title: "",
        author: "",
        type: "",
        status: "",
        province: "",
        city: "",
        area: ""
      },
      content: "",
      dialogTitle: "新增对话框",
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        province: [
          { required: true, message: "省份不能为空", trigger: "blur" }
        ],
        city: [{ required: true, message: "城市不能为空", trigger: "blur" }],
        author: [{ required: true, message: "作者不能为空", trigger: "blur" }],
        type: [{ required: true, message: "类型不能为空", trigger: "blur" }],
        status: [{ required: true, message: "状态不能为空", trigger: "blur" }]
      },
      provinces: [],
      cities: [],
      areas: [],
      types: [],
      statues: [
        {
          id: 1,
          name: "启用"
        },
        {
          id: 0,
          name: "禁用"
        }
      ],
      searchForm: {
        searchTle: "",
        searchName: "",
        searchAudit: "",
        searchStartTime: "",
        searchEndTime: ""
      },
      // 标志打开的是否应该是编辑对话框
      editorFlag: 0,
      // 解决打开编辑对话框后warnSelectData清空问题
      editorSelect: "",
      // 用于记录数据总数
      total: 0
    };
  },
  components: {
    quillEditor
  },
  mounted() {
    // 控制高级搜索框显示隐藏
    $("#heightSearchBtn").click(function() {
      $("#searchBox").toggle(300);
    });
    let _this = this;
    this.initWarnData();
    this.initType();
    this.initProvince();
    this.initCties();
    this.initAreas();
    // 审核功能
    $("#aduitPass").click(function() {
      _this.checkArticle(1);
    });
    $("#aduitNotPass").click(function() {
      _this.checkArticle(2);
    });
    // 评论功能
    $("#comAble").click(function() {
      _this.commentAble(1);
    });
    $("#comUnAble").click(function() {
      _this.commentAble(0);
    });
    // 新增数据功能
    $("#addClick").click(function() {
      _this.ruleForm.title = "";
      _this.ruleForm.author = "";
      _this.ruleForm.type = "";
      _this.ruleForm.status = "";
      _this.ruleForm.province = "";
      _this.ruleForm.city = "";
      _this.ruleForm.area = "";
      _this.content = "";
      _this.dialogVisible = true;
    });
    // 编辑数据功能
    $("#editorClick").click(function() {
      if (_this.warnSelectData.length == 0) {
        _this.$alert("请选中一行数据", "提示信息", {
          confirmButtonText: "确定"
        });
      } else if (_this.warnSelectData.length > 1) {
        _this.$alert("只能修改一行数据", "提示信息", {
          confirmButtonText: "确定"
        });
      } else {
        _this.editorFlag = 1;
        _this.editorSelect = _this.warnSelectData[0].id;
        _this.dialogVisible = true;
        _this.ruleForm.title = _this.warnSelectData[0].title;
        _this.ruleForm.author = _this.warnSelectData[0].author;
        _this.ruleForm.type = _this.warnSelectData[0].type;
        _this.ruleForm.status = _this.warnSelectData[0].status;
        _this.ruleForm.province = _this.warnSelectData[0].provinceCanton;
        _this.ruleForm.city = _this.warnSelectData[0].cityCanton;
        _this.ruleForm.area = _this.warnSelectData[0].countyCanton;
        _this.content = _this.warnSelectData[0].contents;
      }
    });
    // 删除功能
    $("#deleteClick").click(function() {
      _this.deleteData();
    });
    // 快速查询
    $("#quickSearchBtn").click(function() {
      _this.quickSearch();
    });
    // 高级查询
    $("#hightSearchBtn").click(function() {
      _this.hightSearch();
    });
    // 清空收缩框
    $("#resetSearchBtn").click(function() {
      _this.searchForm.searchTle = "";
      _this.searchForm.searchName = "";
      _this.searchForm.searchAudit = "";
      _this.searchForm.searchStartTime = "";
      _this.searchForm.searchEndTime = "";
    });
  },
  methods: {
    // 初始化类型
    initType() {
      let _this = this;
      $.ajax({
        url: "/api/police/news/type/list?respType=1",
        dataType: "json",
        type: "GET",
        data: {
          searchAdv: JSON.stringify({ s_status: 1, s_logicDelete: 0 })
        },
        success: function(data) {
          _this.types = data;
        }
      });
    },
    //初始化省份
    initProvince() {
      let _this = this;
      $.ajax({
        url: "/api/police/areas/getNowAreas",
        dataType: "json",
        type: "GET",
        data: {
          searchAdv: JSON.stringify({ s_status: 1, s_logicDelete: 0 })
        },
        success: function(data) {
          _this.provinces = data;
        }
      });
    },
    // 初始化城市
    initCties() {
      let _this = this;
      $.ajax({
        url: "/api/police/areas/getNowCity?parentId=450000",
        dataType: "json",
        type: "GET",
        data: {
          searchAdv: JSON.stringify({ s_status: 1, s_logicDelete: 0 })
        },
        success: function(data) {
          _this.cities = data;
        }
      });
    },
    initAreas() {
      let _this = this;
      $.ajax({
        url: "/api/police/areas/getNowCounty?parentId=450100",
        dataType: "json",
        type: "GET",
        data: {
          searchAdv: JSON.stringify({ s_status: 1, s_logicDelete: 0 })
        },
        success: function(data) {
          _this.areas = data;
        }
      });
    },
    //初始化数据
    initWarnData() {
      let _this = this;
      _this.loading = true;
      $.ajax({
        methods: "get",
        url: "/api/police/news/list?respType=1",
        dataType: "json",
        data: {
          page: 1,
          rows: 10
        },
        success: function(data) {
          _this.total = data.total;
          _this.warnData = data.rows;
          _this.loading = false;
        }
      });
    },
    // 分页开始
    handleSizeChange: function(size) {
      let _this = this;
      _this.pagesize = size;
      _this.loading = true;
      $.ajax({
        methods: "get",
        url: "/api/police/news/list?respType=1",
        dataType: "json",
        data: {
          page: _this.currentPage,
          rows: _this.pagesize
        },
        success: function(data) {
          _this.total = data.total;
          _this.warnData = data.rows;
          _this.loading = false;
        }
      });
    },
    handleCurrentChange: function(currentPage) {
      let _this = this;
      this.currentPage = currentPage;
      _this.loading = true;
      $.ajax({
        methods: "get",
        url: "/api/police/news/list?respType=1",
        dataType: "json",
        data: {
          searchAdv: JSON.stringify({
            s_title: _this.searchForm.searchTle,
            s_title_op: "al",
            s_author: _this.searchForm.searchName,
            s_author_op: "al",
            s_audit: _this.searchForm.searchAudit,
            s_addTime_b: _this.searchForm.searchStartTime,
            s_addTime_e: _this.searchForm.searchEndTime
          }),
          page: _this.currentPage,
          rows: _this.pagesize
        },
        success: function(data) {
          _this.total = data.total;
          _this.warnData = data.rows;
          _this.loading = false;
        }
      });
    },
    // 分页结束
    warnSelectChange(val) {
      this.warnSelectData = val;
    },
    // 审核文章
    checkArticle(val) {
      let row = this.warnSelectData;
      let _this = this;
      let ids = "";
      if (row.length == 0) {
        this.$alert("请选中一行数据", "提示信息", {
          confirmButtonText: "确定"
        });
      } else {
        for (let i = 0; i < row.length; i++) {
          ids += row[i].id + ",";
        }
        ids = ids.substring(0, ids.length - 1);
        _this.loading = true;
        $.ajax({
          url: "/api/police/news/audit",
          dataType: "json",
          type: "POST",
          async: true,
          data: {
            newsIds: ids,
            status: val
          },
          success: function(data) {
            $.ajax({
              methods: "get",
              url: "/api/police/news/list?respType=1",
              dataType: "json",
              data: {
                searchAdv: JSON.stringify({
                  s_title: _this.searchForm.searchTle,
                  s_title_op: "al",
                  s_author: _this.searchForm.searchName,
                  s_author_op: "al",
                  s_audit: _this.searchForm.searchAudit,
                  s_addTime_b: _this.searchForm.searchStartTime,
                  s_addTime_e: _this.searchForm.searchEndTime
                }),
                page: _this.currentPage,
                rows: _this.pagesize
              },
              success: function(data) {
                _this.warnData = data.rows;
                if (val == 1) {
                  _this.$alert("审核通过", "提示信息", {
                    confirmButtonText: "确定"
                  });
                } else {
                  _this.$alert("审核不通过", "提示信息", {
                    confirmButtonText: "确定"
                  });
                }
                _this.loading = false;
              }
            });
          }
        });
      }
    },
    // 是否启用评论功能
    commentAble(val) {
      var row = this.warnSelectData;
      let _this = this;
      if (row.length == 0) {
        this.$alert("请选中一行数据", "提示信息", {
          confirmButtonText: "确定"
        });
      } else {
        var ids = "";
        for (var i = 0; i < row.length; i++) {
          ids += row[i].id + ",";
        }
        ids = ids.substring(0, ids.length - 1);
        _this.loading = true;
        $.ajax({
          url: "/api/police/news/changeComable",
          dataType: "json",
          type: "POST",
          async: true,
          data: {
            ids: ids,
            val: val
          },
          success: function(data) {
            $.ajax({
              methods: "get",
              url: "/api/police/news/list?respType=1",
              dataType: "json",
              data: {
                searchAdv: JSON.stringify({
                  s_title: _this.searchForm.searchTle,
                  s_title_op: "al",
                  s_author: _this.searchForm.searchName,
                  s_author_op: "al",
                  s_audit: _this.searchForm.searchAudit,
                  s_addTime_b: _this.searchForm.searchStartTime,
                  s_addTime_e: _this.searchForm.searchEndTime
                }),
                page: _this.currentPage,
                rows: _this.pagesize
              },
              success: function(data) {
                _this.warnData = data.rows;
                if (val == 1) {
                  _this.$alert("启用评论", "提示信息", {
                    confirmButtonText: "确定"
                  });
                } else {
                  _this.$alert("禁用评论", "提示信息", {
                    confirmButtonText: "确定"
                  });
                }
                _this.loading = false;
              }
            });
          }
        });
      }
    },
    // 删除数据
    deleteData() {
      let _this = this;
      let row = _this.warnSelectData;
      let ids = "";
      for (var i = 0; i < row.length; i++) {
        ids += row[i].id + ",";
      }
      ids = ids.substring(0, ids.lastIndexOf(","));
      if (row.length == 0) {
        this.$alert("请选中一行数据", "提示信息", {
          confirmButtonText: "确定"
        });
      } else {
        _this.loading = true;
        $.ajax({
          url: "/api/police/news/delAll",
          dataType: "json",
          type: "POST",
          async: false,
          data: {
            ids: ids
          },
          success: function(data) {
            _this.total = _this.total - row.length;
            $.ajax({
              methods: "get",
              url: "/api/police/news/list?respType=1",
              dataType: "json",
              data: {
                searchAdv: JSON.stringify({
                  s_title: _this.searchForm.searchTle,
                  s_title_op: "al",
                  s_author: _this.searchForm.searchName,
                  s_author_op: "al",
                  s_audit: _this.searchForm.searchAudit,
                  s_addTime_b: _this.searchForm.searchStartTime,
                  s_addTime_e: _this.searchForm.searchEndTime
                }),
                page: _this.currentPage,
                rows: _this.pagesize
              },
              success: function(data) {
                _this.warnData = data.rows;
                _this.$alert("删除成功", "提示信息", {
                  confirmButtonText: "确定"
                });
                _this.loading = false;
              }
            });
          }
        });
      }
    },
    // 快速查询
    quickSearch() {
      let _this = this;
    },
    // 高级查询
    hightSearch() {
      let _this = this;
      _this.loading = true;
      $.ajax({
        methods: "get",
        url: "/api/police/news/list?respType=1",
        dataType: "json",
        data: {
          searchAdv: JSON.stringify({
            s_title: _this.searchForm.searchTle,
            s_title_op: "al",
            s_author: _this.searchForm.searchName,
            s_author_op: "al",
            s_audit: _this.searchForm.searchAudit,
            s_addTime_b: _this.searchForm.searchStartTime,
            s_addTime_e: _this.searchForm.searchEndTime
          }),
          page: 1,
          rows: _this.pagesize
        },
        success: function(data) {
          _this.total = data.total;
          _this.warnData = data.rows;
          _this.loading = false;
          _this.currentPage = 1;
        }
      });
    },
    // 新增和修改数据
    submitForm(formName) {
      let provinceObj = {};
      let cityObj = {};
      let areaObj = {};
      let typeObj = {};
      let _this = this;
      for (let i = 0; i < this.provinces.length; i++) {
        provinceObj[this.provinces[i].id] = this.provinces[i].name;
      }
      for (let i = 0; i < this.cities.length; i++) {
        cityObj[this.cities[i].id] = this.cities[i].name;
      }
      for (let i = 0; i < this.areas.length; i++) {
        areaObj[this.areas[i].id] = this.areas[i].name;
      }
      for (let i = 0; i < this.types.length; i++) {
        typeObj[this.types[i].id] = this.types[i].name;
      }
      if (_this.editorFlag === 1) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            _this.loading = true;
            $.ajax({
              url: "/api/police/news/" + _this.editorSelect,
              dataType: "json",
              type: "POST",
              data: {
                title: _this.ruleForm.title,
                provinceCanton: _this.ruleForm.province,
                provinceCantonName: provinceObj[_this.ruleForm.province],
                cityCanton: _this.ruleForm.city,
                cityCantonName: cityObj[_this.ruleForm.city],
                countyCanton: _this.ruleForm.area,
                countyCantonName: areaObj[_this.ruleForm.area],
                author: _this.ruleForm.author,
                type: _this.ruleForm.type,
                status: _this.ruleForm.status,
                audit: 0,
                id: _this.editorSelect,
                contents: _this.content
              },
              success: function() {
                $.ajax({
                  methods: "get",
                  url: "/api/police/news/list?respType=1",
                  dataType: "json",
                  data: {
                    searchAdv: JSON.stringify({
                      s_title: _this.searchForm.searchTle,
                      s_title_op: "al",
                      s_author: _this.searchForm.searchName,
                      s_author_op: "al",
                      s_audit: _this.searchForm.searchAudit,
                      s_addTime_b: _this.searchForm.searchStartTime,
                      s_addTime_e: _this.searchForm.searchEndTime
                    }),
                    page: _this.currentPage,
                    rows: _this.pagesize
                  },
                  success: function(data) {
                    _this.warnData = data.rows;
                    _this.editorFlag = 0;
                    _this.dialogVisible = false;
                    _this.loading = false;
                  }
                });
              }
            });
          } else {
            return false;
          }
        });
      } else {
        this.$refs[formName].validate(valid => {
          if (valid) {
            _this.loading = true;
            $.ajax({
              url: "/api/police/news/0",
              dataType: "json",
              type: "POST",
              data: {
                title: _this.ruleForm.title,
                provinceCanton: _this.ruleForm.province,
                provinceCantonName: provinceObj[_this.ruleForm.province],
                cityCanton: _this.ruleForm.city,
                cityCantonName: cityObj[_this.ruleForm.city],
                countyCanton: _this.ruleForm.area,
                countyCantonName: areaObj[_this.ruleForm.area],
                author: _this.ruleForm.author,
                type: _this.ruleForm.type,
                status: _this.ruleForm.status,
                audit: 0,
                id: 0,
                contents: _this.content
              },
              success: function() {
                _this.total = _this.total + 1;
                $.ajax({
                  methods: "get",
                  url: "/api/police/news/list?respType=1",
                  dataType: "json",
                  data: {
                    searchAdv: JSON.stringify({
                      s_title: _this.searchForm.searchTle,
                      s_title_op: "al",
                      s_author: _this.searchForm.searchName,
                      s_author_op: "al",
                      s_audit: _this.searchForm.searchAudit,
                      s_addTime_b: _this.searchForm.searchStartTime,
                      s_addTime_e: _this.searchForm.searchEndTime
                    }),
                    page: _this.currentPage,
                    rows: _this.pagesize
                  },
                  success: function(data) {
                    _this.warnData = data.rows;
                    _this.dialogVisible = false;
                    _this.loading = false;
                  }
                });
              }
            });
          } else {
            return false;
          }
        });
      }
    },
    formatterInp(row, column, cellValue) {
      var inpt = "";
      if (cellValue == 1) {
        inpt = <input type="checkbox" checked="checked" />;
      } else {
        inpt = <input type="checkbox" />;
      }
      return inpt;
    },
    formatterType(row) {
      var inpt = "";
      if (row.newsType.name) {
        return row.newsType.name;
      }
    },
    formatterFrom(row) {
      var str = "";
      if (row.provinceCantonName) {
        str += row.provinceCantonName + " ";
      }
      if (row.cityCantonName) {
        str += row.cityCantonName + " ";
      }
      if (row.countyCantonName) {
        str += row.countyCantonName + " ";
      }
      return str;
    }
  }
};
</script>

<style scoped>
.warn-tool {
  width: 100%;
  padding: 10px;
  line-height: 40px;
  background-color: #fff;
}
.warn-table-body {
  padding: 10px;
  background-color: #fff;
  width: 100%;
}
.search-box {
  border: 1px solid #eee;
  display: none;
}
.box-left {
  width: 900px;
  margin: 10px;
  border-right: 1px solid #eee;
}
.box-right {
  margin-left: 921px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
#eidtor-box >>> .ql-editor {
  height: 150px !important;
}
</style>
